<template>
	<view class="vr_list">
		<view class="float-style  between borders-pad">
			<view class="img_item f_left">
				<view class="left_items disp flex-col center" v-for="(item, indexNaN) in pics" :key="indexNaN"  v-if="indexNaN % 2 == 0">
					<image lazy-load mode="widthFix"
						class="img-waterfall" :src="item.imageUrl" :style="'height:' + item.picHeight + 'rpx;'"
						@tap="menusTap(item)" ></image>
					<view class="name_text two-line">{{item.name}}</view>
				</view>
			</view>
			<view class="img_item f_right">
				<view class="left_items disp flex-col center" v-for="(item, indexNaN) in pics" :key="indexNaN"  v-if="indexNaN % 2 != 0">
					<image lazy-load mode="widthFix"
						class="img-waterfall" :src="item.imageUrl" :style="'height:' + item.picHeight + 'rpx;'"
						@tap="menusTap(item)" ></image>
					<view class="name_text two-line">{{item.name}}</view>
				</view>
			</view>
			<view class="clear"></view>
		</view>
	</view>
</template>

<script>
	import {
		getVrList
	} from "@/api/summer"
	export default {
		data() {
			return {
				pics: []
			};
		},
		
		onLoad() {
			this.getList();
		},
		
		methods: {
			//前往VR地址
			menusTap(item) {
				
				this.toUrl(`/pages/goods/web_page/index?vrId=${item.id}`)
			},

			getList() {
				this.m_show("加载中");
				getVrList().then(res => {
					this.m_hide();
					this.pics = res.data;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.vr_list {
		width: 100%;
	}

	.img_item {
		flex-shrink: 0;
		width: 49%;
	}

	.img-waterfall {
		width: 100%;
		margin-bottom: 12rpx;
	}

	.f_left {
		float: left;
	}

	.f_right {
		float: right;
	}
	
	.borders-pad {
		padding: 0 26rpx;
	}
	
	.left_items {
		margin: 10rpx 0;
	}
	
	.name_text {
		max-height: 64rpx;
		line-height: 32rpx;
	}
</style>